<template>
	<div class="pageSize-container">
		<el-dialog v-model="isShowDialog" draggable :close-on-click-modal="false" width="400px">
			<template #header>
				<div style="color: #fff;padding: 8px;">
					<el-icon size="16" style="margin-right: 3px; display: inline; vertical-align: middle"> <ele-Edit /> </el-icon>
					<span> {{ props.title }} </span>
				</div>
			</template>
			<el-form :model="dataForm" ref="ruleFormRef" label-width="auto">
				<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
					<el-form-item label="纸张设置">
						<el-select v-model="dataForm.type" filterable clearable class="w100" @change="onPageSizeChange">
							<el-option v-for="item in options" :key="item.id" :label="item.fullName" :value="item.id" />
						</el-select>
					</el-form-item>
				</el-col>
				<el-form-item label="" v-if="dataForm.type">
					<el-row :gutter="10">
						<el-col :span="12">
							<el-input placeholder="" v-model="dataForm.width" :disabled="dataForm.type != '6'">
								<template #prepend>宽</template>
								<template #append>mm</template>
							</el-input>
						</el-col>
						<el-col :span="12">
							<el-input placeholder="" v-model="dataForm.height" :disabled="dataForm.type != '6'">
								<template #prepend>高</template>
								<template #append>mm</template>
							</el-input>
						</el-col>
					</el-row>
				</el-form-item>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="cancel">取 消</el-button>
					<el-button type="primary" @click="handleSubmit">确 定</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>
<script lang="ts" setup>
import { reactive, toRefs } from 'vue';
import { cloneDeep } from 'lodash-es';
import { ElMessage } from 'element-plus';
const props = defineProps({
	title: String
});

const emit = defineEmits(['register', 'change']);

interface State {
	options: any[];
	dataForm: any;
	sizeMap: any;
	isShowDialog: boolean;
}

const defaultData = {
	type: '2',
	width: '210',
	height: '297',
};
const state = reactive<State>({
	isShowDialog: false,
	options: [
		{ fullName: 'A3', id: '1' },
		{ fullName: 'A4', id: '2' },
		{ fullName: 'A5', id: '3' },
		{ fullName: 'B3', id: '4' },
		{ fullName: 'B5', id: '5' },
		{ fullName: '自定义', id: '6' },
	],
	dataForm: defaultData,
	sizeMap: {
		'1': [297, 420],
		'2': [210, 297],
		'3': [148, 210],
		'4': [353, 500],
		'5': [176, 250],
	},
});

const { dataForm, options, isShowDialog } = toRefs(state);


function handleSubmit() {
	try {
		let width = state.dataForm.width;
		let height = state.dataForm.height;
		if (width <= 0) return ElMessage.warning('纸张宽度不能小于0');
		if (height <= 0) return ElMessage.warning('纸张高度不能小于0');
		cancel();
		setTimeout(() => {
			emit('change', state.dataForm);
		}, 200);
	} catch (error) {
		cancel();
	}
}
function onPageSizeChange(e: any) {
	if (e == '6') {
		state.dataForm.width = '';
		state.dataForm.height = '';
		return;
	}
	let data = state.sizeMap[e];
	state.dataForm.width = data[0];
	state.dataForm.height = data[1];
}

function curPaperType() {
	let type = '6';
	let types = state.sizeMap;
	for (const key in types) {
		let item = types[key];
		if (item[0] === state.dataForm.width && item[1] === state.dataForm.height) {
			type = key;
		}
	}
	return type;
}

// 打开弹窗
const openDialog = (row: any) => {
	state.dataForm = cloneDeep(row.pageParam ? row.pageParam : defaultData);
	state.dataForm.type = curPaperType();
	state.isShowDialog = true;
};

// 取消
const cancel = () => {
	state.isShowDialog = false;
};

// 导出对象
defineExpose({ openDialog });
</script>
